/*
 * @Descripttion: 
 * @Author: chunhu-yin
 * @Date: 2021-03-12 14:33:16
 * @LastEditTime: 2021-03-22 10:07:14
 */
import React from 'react'
import { Trans } from 'react-i18next'
import Http from './../../../request/index'
import { Table, DatePicker, SwapRightOutlined } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import Toolsbox from '@/components/Toolsbox'
import Mainbox from '@/components/Mainbox'
const { RangePicker } = DatePicker;
const columns = [
    {
        title: '用户名',
        dataIndex: 'Name',
        key: 'Name',
        fixed: 'left',
        width: 100,
    },
    {
        title: '经度',
        dataIndex: 'longitude',
        key: 'longitude',
        width: 100
    },
    {
        title: '纬度',
        dataIndex: 'latitude',
        key: 'latitude',
        width: 100
    },
    {
        title: '手机号',
        dataIndex: 'Phone',
        key: 'Phone',
        width: 100
    },
]
let backAndTextColor = {
    width: '5px',
    height: '5px',
    background: 'red',
    position: 'absolute',
    right: '2px',
    top: '17px',
    borderRadius: '50%'
};
let positionRe = {
    position: 'relative',
    height: '100%'
}
const name = function (params) {
    return (<div></div>)
}
class Recycler extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedRowKeys: [1,3], // Check here to configure the default column
            loading: false,
            data: [
                {
                Id:1,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            }
            ,{
                Id:2,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            },
            {
                Id:3,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            }
            ,{
                Id:4,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            }
            ,{
                Id:5,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            }
            ,{
                Id:6,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            }
            ,{
                Id:7,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            }
            ,{
                Id:8,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            }
            ,{
                Id:9,
                Phone:13500580945,
                Name:'尹纯虎',
                longitude:111,
                latitude:111,
            }
        ],
            currentPageNum: 1,
            total: 0,
            haveData: ['2021-07-20', '2021-10-20'],
            pagesize: 10,
            heightTable: window.innerHeight - 377,

        }
        this.dateChanged = this.dateChanged.bind(this)
        this.open = this.open.bind(this)
        this.fuc = this.fuc.bind(this)

    }
    onSelectChange =  (selectedRowKeys,d,e,f)=> {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        console.log('selectedRowKeys changed: 1', d);
        console.log('selectedRowKeys changed:2 ', e);
        console.log('selectedRowKeys changed: 3', f);
        this.setState({ selectedRowKeys });
    };
    componentDidMount(){
        let that = this;
        document.querySelector('div.ant-table-body').style.height = window.innerHeight - 377 +'px'
        window.addEventListener('resize', function (e) {
            document.querySelector('div.ant-table-body').style.height = window.innerHeight - 377 +'px'
            that.setState({
                heightTable: window.innerHeight - 377,
            })
        })
    }
    componentWillMount() {
        let that = this;
        // this.getDataList()

    }
    async  getDataList() {
        let data = {
            pageIndex: this.state.currentPageNum,
            pageSize: this.state.pagesize
        }
        var res = await Http.get('/v1/admin/getAdmins', data)
        if (res.code == 200) {
            this.setState({
                data: res.results.results,
                total: res.results.totalCount
            })
        }
    }
    handleTableChange(pageNum, pageSize) {
        if (pageNum != this.state.currentPageNum) {
            this.setState({
                currentPageNum: pageNum
            }, () => {
                this.getDataList()
            })

        }
        if (pageSize != this.state.pagesize) {
            this.setState({
                pagesize: pageSize,
                data: []
            }, () => {
                this.getDataList()
            })
        }
    }
    dateChanged(data, str) {
        // console.log(data)
        console.log(str)
    }
    open(data) {
        console.log(data)
    }
    getItem(d) {
        if (this.state.haveData.includes(d)) {
            return (
                <div style={backAndTextColor}></div>
            )
        }
    }
    fuc(data, m) {
        var today = data.date()
        var date = data.year() + '-' + ((data.month() + 1) > 9 ? (data.month() + 1) : '0' + (data.month() + 1)) + '-' + (today > 9 ? today : '0' + today)
        return (<div style={positionRe} className='ant-picker-cell-inner'>{today}{this.getItem(date)}</div>)
    }
    render() {
        const { loading, selectedRowKeys, total, heightTable, data } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps(record) {
                // console.log(record)
                return {
                    // disabled: selectedRowKeys.indexOf(record.Id) !== -1,
                    disabled: record.Id == 1,
                };
            },
            // columnTitle:"dd",
            hideDefaultSelections:true,
            // type:'radio',
            selection:[{
                key:'Name',
                text:'6666'
            }]
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div style={positionRe}>
                <Toolsbox>
                    <RangePicker locale={locale} onChange={this.dateChanged} separator={'-'} inputReadOnly={true} onOpenChange={this.open} dateRender={this.fuc} />
                </Toolsbox>
                <Mainbox>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data} rowKey='Id' pagination={{
                        defaultCurrent: this.state.currentPageNum,
                        total: total,
                        onChange: this.handleTableChange.bind(this),
                    }}
                        bordered={true}
                        scroll={{
                            y: heightTable
                        }}
                    />
                </Mainbox>
            </div>
        )
    }

}

export default Recycler
